﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Game tutorial</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        function changePage(page) {
            var url = page;
            $.ajax({
                url: url,
                success: function (data) {
                    $("#main").html(data);

                }
            });
        }

        (function () {
            var match,
				pl = /\+/g, // Regex for replacing addition symbol with a space
				search = /([^&=]+)=?([^&]*)/g,
				decode = function (s) {
				    return decodeURIComponent(s.replace(pl, " "));
				},
				query = window.location.search.substring(1);

            var urlParams = {};
            while (match = search.exec(query))
                urlParams[decode(match[1])] = decode(match[2]);
            window.gameUrl = "../indexPreview.html?fileName=" + urlParams["fileName"] + "&folderName=" + urlParams["folderName"] + "&turkSubmitTo=" + urlParams["turkSubmitTo"] + "&assignmentId=" + urlParams["assignmentId"];
         window.longTuto = "index.html?fileName=" + urlParams["fileName"] + "&folderName=" + urlParams["folderName"] + "&turkSubmitTo=" + urlParams["turkSubmitTo"] + "&assignmentId=" + urlParams["assignmentId"];
        })();

        function goToGame() {
            window.location = window.gameUrl;
        }
        function goToLongTuto() {
            window.location = window.longTuto;
        }
    </script>
    <link rel="Stylesheet" href="tutorial.css" type="text/css" />
    <style>
        #content
        {
            font-size:25px;
            line-height: 38px;
        }
        table
        {
            margin: 0;
        }
        tr
        {
            padding-top: 0;
            height: auto;
            margin-top: 0;
        }
        td
        {
            padding-right: 50px;
        }
        .red
        {
            color: Red;
        }
        th
        {
            text-align: left;
            padding-right: 50px;
        }
        #content
        {
            border-color: #0036D9;
        }
        #top h1
        {
            color: #0036D9;
        }
        #top
        {
            margin-top: 0;
            padding-top: 0;
        }
        #middle
        {
            padding: 0;
        }
        body
        {
            padding: 0;
            margin: 0;
        }
        #main
        {
            margin-top: 0;
            padding-top: 0;
        }
        .number
        {
            width: 100px;
            border-color: #0036D9;
            color: #0036D9;
            float:right;
        }
        img
        {
            float:right;
        }
        ol
        {
            margin-top:0;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="top">
            <h1>
                General</h1>
        </div>
        <div id="middle">
            <div id="content">
                
                    SpaceGame is a flight game. <br />
                     <img src="../imgs/tutorialImg/meteor2.png" />
                    Your goal is to control the spaceship to earn as much points as possible. <br /> 
                    Points are earned when the spaceship shoots down a meteor.  <br />
                     <img src="../imgs/tutorialImg/feulStation.png" />
                    In order to function properly, the spaceship needs fuel and it needs to be well maintained. <br />
                                     
                          <img src="../imgs/tutorialImg/ship.png" />
                          
                          Points are lost when:
              <ol>
              <li>a meteor hits the ship </li>
 <li>the fuel tank is empty</li>
 <li>the fuel tank is refilled</li>
 <li>when a maintenance action is performed</li>
 <li>when a malfunction occurs</li>
 <li>when a malfunction is repaired</li>

              </ol>
                <div class="number">
            <a href="#" onclick="changePage('sp2.html')">>></a>
            </div>
            </div>
            
        </div>
       
       
        </div>
    
</body>
</html>
